Table Layouts

One of the biggest frustrations with simple HTML is that elements will move around and space themselves differently depending on the size of the page. The columns get wider and narrower and pictures will move around depending on how wide the page is.

The easiest way to nail things down and create a fixed page layout is by putting these elements in a table and then assign a fixed size to the table. Then nothing can move around and the size of the page is set. If you make the page narrower you may not see the whole page but the layout stays constant.

Purists and advocates of CSS/Div layout will scream all day that this is bad, bad, bad.

I don't agree. I like table layout. It's a lot easier than Div based layout. But when it comes to your own projects the choice will be up to you. In this class we will learn both methods.

Definitions

When creating a table, start with a <table> and end of table tag. Between these create a row with a <tr> tag, and then one or more cells, then end the row with </tr>. Create as many rows as you like, and end with </table>.

Example Table

Let's look at a simple example of the html tags used to create a table with two rows and two columns. I will put letters in each cell so you can see where the cells are.

<table border=1>
<tr>
<td>a</td>
<td>b;</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>

Notice that all our tags are in pairs such as <td>xxx</td>.

Here's what our table looks like:

The table is just big enough to hold the contents of the cells. Since each cell has just one letter, they don't need to be very big.

Let's expand our table as follows:

• Top part is the header, width 400 and height 50
• Content area is 300 wide and 200 high
• Right menu area is 100 wide
• Footer is 400 wide and 50 high

In order to make this work we will add the colspan and width options as follows:

<table width="500" border="1">
<tr>
<td height="50" colspan="2">a</td>
</tr>
<tr>
<td height="200">b</td>
<td width="100" height="200">c</td>
</tr>
<tr>
<td height="50" colspan="2">d</td>
</tr>
</table>

The table looks like this:

Creating Space and Margins

Our page needs some space around the text to separate it from the edge of the boxes. We have options we can use to set this which you can set fairly easily using the properties panel:

Here's the meaning of the options for the TABLE. These properties apply to the entire table, not just one cell.

• Rows: The number of rows in the table. Note that this is not exactly a settable property, its just a number that Dreamweaver gets by reading the table and checking to see how many rows there are.
• Cols: The number of column in the table. Note that this is not exactly a settable property, its just a number that Dreamweaver gets by reading the table and checking to see how many columns there are.
• W: Width, usually in pixels or percent of screen width.
• Cellpad: The distance from the cell wall to your text inside the cell.
• Cellspace: spacing from cell to cell. I usually set this to zero.
• Align: text placement left/right
• Class: used for CSS rule assignment.
• Border: the thickness of the border of each cell in the table. 1 usually looks fine. Set this to zero if you don't want to see the cell borders.

So, in order to offset the text, we set cellpadding to 5 as shown above.

We could now put pictures and text in the various cells, and make the border invisible by setting border=0 and cellspacing="0" in the <table> tag. I'm going to set cellpadding to 5 so my text isn't right up against the wall. I'm going to set some colors in the header and footer area so we can see where they are.

Here's the html:

<table width="500" border="0"  cellpadding="5" cellspacing="0">
<tr>
<td height="50" colspan="2" bgcolor="#0066FF">Header</td>
</tr>
<tr>
<td height="200">All work and no play makes Jack a dull boy. 
All work and no play makes Jack a dull boy. All work and no play 
makes Jack a dull boy. All work and no play makes Jack a dull boy. 
All work and no play makes Jack a dull boy. All work and no play 
makes Jack a dull boy. All work and no play makes Jack a dull boy. 
All work and no play makes Jack a dull boy. </td>
<td width="100" height="200" bgcolor="#CCCCCC">menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br /></td>
</tr>
<tr>
<td height="50" colspan="2" bgcolor="#0033CC">d</td>
</tr>
</table>

And here's what it looks like:

This simple layout will get us started. There are many things you can do to makethis look better and to make things a lot more readable.

The next thing to do is go to Photoshop or some other graphics program and create some nice header and footer graphics. We will talk about that on another day.

You will want to contrast this with the very different "Div" based layout strategy described in the book in Chapter 7.

Project

Create a web page about an artist from the website artrenewal.org. Create a web site about this artist.

Create a home page and call it "projectone.html". This page will be 750 x 400 pixels. The page will be divided into two areas. The top area is 400 x 750 and will have the name of the artist, a picture of the artist, and some text. The bottom part of the page will be 200 pixels high, 750 wide, and will be sub-divided into three 250 x 250 cells. Each of those cells will contain a thumbnail image of one painting and will link to a page about that painting.

OK, that's the first page. Now we need to make three identical sub-pages. Each will be the same size as the main page. Each will be divided in half. Not quite half actually. The top half will be 400x 750 and the bottom half will be 200 x 750. The top half will have a painting. The bottom half will have the name and some information about the painting.

So, we have a main page that links to three subpages and we will create a layout for each page using tables.